<template>
  <div class="fixed inset-0 bg-black/60 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-[600px] max-h-[80vh] overflow-y-auto">
      <div class="p-6 border-b">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-semibold">消息模板管理</h3>
          <button @click="$emit('close')" class="text-gray-600 hover:text-gray-800">
            <i class="ri-close-line text-xl"></i>
          </button>
        </div>
      </div>
      
      <div class="p-6">
        <div class="mb-6">
          <h4 class="font-medium text-gray-800 mb-3">创建新模板</h4>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">模板名称</label>
              <input 
                v-model="templateForm.name"
                type="text" 
                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="如：面试邀请"
              >
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">模板内容</label>
              <textarea 
                v-model="templateForm.content"
                rows="4"
                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="输入模板内容，可使用 {姓名}、{职位} 等变量"
              ></textarea>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">分类</label>
              <select 
                v-model="templateForm.category"
                class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary"
              >
                <option value="interview">面试相关</option>
                <option value="offer">Offer相关</option>
                <option value="rejection">拒绝通知</option>
                <option value="follow-up">跟进沟通</option>
              </select>
            </div>
            <button 
              @click="saveTemplate"
              class="w-full py-2 bg-primary text-white rounded hover:bg-primary/90"
            >
              保存模板
            </button>
          </div>
        </div>
        
        <div>
          <h4 class="font-medium text-gray-800 mb-3">已有模板</h4>
          <div class="space-y-3">
            <div 
              v-for="template in existingTemplates"
              :key="template.id"
              class="p-3 border border-gray-200 rounded hover:border-primary transition-colors"
            >
              <div class="flex justify-between items-start">
                <div class="flex-1">
                  <h5 class="font-medium text-gray-800">{{ template.name }}</h5>
                  <p class="text-sm text-gray-600 mt-1">{{ template.content }}</p>
                  <span class="inline-block mt-2 px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
                    {{ getCategoryName(template.category) }}
                  </span>
                </div>
                <div class="flex space-x-2 ml-4">
                  <button class="text-primary hover:text-primary/80 text-sm">使用</button>
                  <button class="text-gray-500 hover:text-gray-700 text-sm">编辑</button>
                  <button class="text-red-500 hover:text-red-700 text-sm">删除</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  close: []
  save: [template: any]
}>()

const templateForm = ref({
  name: '',
  content: '',
  category: 'interview'
})

const existingTemplates = ref([
  {
    id: '1',
    name: '面试邀请',
    content: '您好 {姓名}，感谢您对我们 {职位} 职位的关注。我们想邀请您参加面试，时间安排在 {时间}，地点在 {地点}。请确认是否方便。',
    category: 'interview'
  },
  {
    id: '2',
    name: 'Offer通知',
    content: '恭喜您！经过面试评估，我们决定向您发出 {职位} 的工作邀请。具体薪资和福利待遇请查看附件，期待您的回复。',
    category: 'offer'
  }
])

const getCategoryName = (category: string) => {
  const categoryMap: Record<string, string> = {
    interview: '面试相关',
    offer: 'Offer相关',
    rejection: '拒绝通知',
    'follow-up': '跟进沟通'
  }
  return categoryMap[category] || category
}

const saveTemplate = () => {
  if (templateForm.value.name && templateForm.value.content) {
    emit('save', { ...templateForm.value })
    templateForm.value = { name: '', content: '', category: 'interview' }
  }
}
</script>
